<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'report.jsp' starting page</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<link rel="stylesheet" type="text/css" href="css/report.css">
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
			});
		</script>
		<script type="text/javascript">
			$(function () {
			    var chart;
			    $(document).ready(function() {
			        chart = new Highcharts.Chart({
			            chart: {
			                renderTo: 'container',
			                type: 'bar',
			                backgroundColor: '#f3f3f3'
			            },
			            title: {
			                text: ' '
			            },
			            subtitle: {
			                text: null
			            },
			            xAxis: {
			                categories: ['二月', '三月', '四月'],
			                title: {
			                    text: null
			                }
			            },
			            yAxis: {
			                min: 0,
			                title: {
			                    text: null,
			                    align: 'high'
			                }
			            },
			            tooltip: {
			                formatter: function() {
			                    return ''+
			                        this.series.name +': '+ this.y +'元';
			                }
			            },
			            plotOptions: {
			                bar: {
			                    dataLabels: {
			                        enabled: true
			                    }
			                }
			            },
			            legend: {
			                align: 'center',
			                verticalAlign: 'bottom',
			                borderWidth: 1,
			                backgroundColor: '#FFFFFF'
			            },
			            lang: {
			            	downloadPNG: '导出PNG图片',
			            	downloadJPEG: '导出JPGE图片',
			            	downloadPDF: '导出PDF',
			            	downloadSVG: '导出SVG',
			            	printButtonTitle: '打印',
			            	exportButtonTitle: '导出'
				        },
			            credits: {
			                enabled: false
			            },
			            series: [{
			                name: '预算',
			                data: [107, 31, 635]
			            	},
			            	{
			                name: '实际',
			                data: [107, 31, 635]
			            }]
			        });
			    });
			    
			});
		</script>
	</head>

	<body style="background-image: url('img/bg.jpg');">
		<center>
			<jsp:include page="tiles-components/top.jsp"></jsp:include>
			<div style="background: url('img/conbg.gif') repeat-y;width: 998px;">
				<div style="height: 40px;width: 100%;"></div>
				<center>
					<table style="width: 980px;"> 
						<tr>
							<td width="720px" valign="top">
								<div style="width: 100%;height: 41px;background: url('img/titbg.jpg') repeat-x 0px -97px;"><%-- --%>
									<table width="100%" height="41px">
										<tr>
											<td width="15px">
												&nbsp;
											</td>
											<td width="120px" style="font-size: 14px;font-weight: bold;color: #fff">
												我的预算
											</td>
											<td>
												<a href="javascript:void(0)" class="pre"></a>
												<a class="month" href="javascript:void(0)">1月</a>
												<a class="month" href="javascript:void(0)">2月</a>
												<a class="month" href="javascript:void(0)">3月</a>
												<a class="month" href="javascript:void(0)">4月</a>
												<a class="month" href="javascript:void(0)">5月</a>
												<a class="month" href="javascript:void(0)">6月</a>
												<a class="month" href="javascript:void(0)">7月</a>
												<a class="month" href="javascript:void(0)">8月</a>
												<a class="month" href="javascript:void(0)">9月</a>
												<a class="month" href="javascript:void(0)">10月</a>
												<a class="month" href="javascript:void(0)">11月</a>
												<a class="month" href="javascript:void(0)">12月</a>
												<a href="javascript:void(0)" class="next"></a>
											</td>
										</tr>
									</table>
								</div>
								<center>
									<table class="Table4">
										<tr>
											<th>类别</th>
											<th>上月预算</th>
											<th>上月实际</th>
											<th>本月实际</th>
											<th>预算收支</th>
										</tr>
										<tr>
											<td><span>餐饮饮食</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>水果零食</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>日常用品</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>柴米油盐</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>物业水电</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>医疗保健</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>交通车费</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>话费网费</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>养车油费</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>旅行娱乐</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
										<tr>
											<td><span>其他杂项</span></td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
											<td>0</td>
										</tr>
									</table>
									<a class="btn3" href="javascript:void(0)">保 &nbsp; 存</a>
								</center>
							</td>
							<td>
								<table class="Table3">
									<tr>
										<th>
											30天内消费比例
										</th>
									</tr>
									<tr>
										<td>
											<script src="js/highcharts.js"></script>
											<script src="js/exporting.js"></script>
											<div id="container" style="max-width: 260px; height: 400px; margin:0px"></div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</center>
				<div style="height: 20px;width: 100%;"></div>
			</div>
			<div><img src="img/con_bottom.gif" /></div>
			<jsp:include page="tiles-components/footer.jsp"></jsp:include>
		</center>
	</body>
</html>
